<template>
   <div class='container container--zone'>
      <div class='region region--full'>
         <div class="region region--full">
      <comImg :imgData="imgData"></comImg>
    </div>
         <tabText :listlinkData='listlinkData' :moreList='moreList' @tabChange="tabChange"></tabText>
         <pageHead :titleData='titleData'></pageHead>
         <!-- us中间echart未添加 -->
         <usNation :title="title"></usNation>
         <stickys :sticky="sticky"></stickys>
         <threeMdNation></threeMdNation>
         
         <usNation :title="title2"></usNation>
         <usNation :title="title3"></usNation>
         <usNation :title="title4"></usNation>
         
         <mastPopular></mastPopular>
         <adverTiseMent></adverTiseMent>
      
      </div>
   </div>
</template>
<script setup>
import tabText from '../../components/tabText/tabText.vue';
import { usemkDataArrays } from '../../api/market';
import pageHead from '../../components/pageHead/pageHead.vue'
import mastPopular from "@/views/home/mastPopular/mastPopular";
import adverTiseMent from '../home/adverTisement/adverTiseMent.vue';
import usNation from './usNation/usNation.vue';
import threeMdNation from './threeMdNation/threeMdNation.vue';
import comImg from "@/components/comImg/comImg.vue";
const imgData = ref("../src/assets/banner.png");
import stickys from "@/components/stickys/stickys.vue";
const sticky = ref("../src/assets/ceAdver.png");
const { marketList } = usemkDataArrays();
const listlinkData = ref([]);
onMounted(async () => {
   const data = localStorage.getItem("tabMdData");
   listlinkData.value = JSON.parse(data).markets;
   listlinkData.value.forEach((item) => {
      if (item.typeName === 'Markets') {
         item.path = '/markets'
      } else if (item.typeName === 'Market Data Center') {
         item.path = '/marketsData'
      } else if (item.typeName === "U.S. Markets") {
         item.path = '/market/us'
      } else if (item.typeName === "Canada") {
         item.path = '/market/canada'
      } else if (item.typeName === "Europe & Middle East") {
         item.path = '/market/europe'
      } else if (item.typeName === "Asia") {
         item.path = '/market/asia'
      } else if (item.typeName === "Emerging Markets") {
         item.path = '/market/emerging'
      } else if (item.typeName === "Latin America") {
         item.path = '/market/latin'
      } else if (item.typeName === "Earnings") {
         item.path = '/market/earnings'
      }
   })
   // 刷新时保持数据
   let name = window.sessionStorage.getItem('titleData')
   if (name) {
      titleData.title = JSON.parse(name).typeName
      titleData.name1 = titleData.title
   }

});
const tabChange = (data) => {
   // 点击Tba切换时存数据
   window.sessionStorage.setItem('titleData', JSON.stringify(data))
   titleData.title = data.typeName
   titleData.name1 = titleData.title
   
}
const title = ref('U.S.')
const title1 = ref('EUROPE')
const title2 = ref('CRYPTOCURRENCY')
const title3 = ref('EUROPE')
const title4 = ref('RATES')
marketList.push({ name: 'Premium Investing Tools', path: '' })
marketList.splice(0, 1)
marketList.splice(0, 1)
const moreList = ref([])
const titleData = reactive({
   title: 'Market Data Center',
   link: 'Home',
   name: 'Market Data Center',
   name1: ''
})
</script>
<style scoped lang='scss'></style>